<!--
  - Copyright (c) 2018.
  - 北京九思金信科技有限公司对该文件内容保留所有权利。
  - 未经许可，不得私自拷贝、传播、发布、引用该文件内容，违者将被追究法律责任。
  -->

<template>
  <el-container>
    <el-container class="right">
      <el-header >
        <frame-head @childMouseover="mouseoverAsideShow"  @childMouseoverHide="mouseoverAsideHide"/>
      </el-header>
      <frame-aside ref="frameAside"> </frame-aside>
      <el-main>
        <frame-content />
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import FrameAside from "./aside";
import FrameHead from "./head";
import FrameContent from "./content";
import { mapState, mapActions } from "vuex";

export default {
  name: "MainFrame",
  data () {
    return {
      frameAsideBox: false
    }
  },
  components: {
    FrameHead,
    FrameContent,
    FrameAside
  },
  props: {
    appletId: { type: String },
    source: { type: String }
  },
  mounted () {
    this.saasOpen();
  },
  created () {
    const baseurl = encodeURIComponent(location.href);
    const token = localStorage.getItem("AUTH-TOKEN");
    if (!token) {
      if (this.source == "saas") {
        location.href = "./login/?from=" + baseurl + "#/loginSaas";
      } else {
        location.href = "./login/?from=" + baseurl;
      }
    } else {
      this.$http
        .get("/joys-rest/joys-auth/auth/valid", { params: { token: token } })
        .then(resp => {
          if (!resp.data) {
            if (this.source == "saas") {
              location.href = "./login/?from=" + baseurl + "#/loginSaas";
            } else {
              location.href = "./login/?from=" + baseurl;
            }
          } else {
            this.loadTenant();
            this.loadUser();
          }
        });
    }
  },
  methods: {
    mouseoverAsideShow () {
      this.$refs.frameAside.asideBoxShow()
    },
    mouseoverAsideHide(){
      this.$refs.frameAside.mouseleaveEvent()
    },
    saasOpen () {
      if (this.appletId) {
        this.openApplet({ appletId: this.appletId });
      }
    },
    ...mapActions(["loadTenant", "loadUser", "openApplet"])
  }
};
</script>
<style scoped>
.el-container {
  width: 100%;
  height: 100%;
}

.right {
  display: flex;
  flex-direction: column;
}
.el-header {
  height: 48px !important;
  background-color: #ffffff;
  color: #333;
  text-align: center;
}

.el-main {
  flex: 1;
  color: #333;
  padding: 0;
}
</style>
